<script setup lang="ts">
import { ref } from 'vue'

const $emit = defineEmits(['change', 'end'])
const $props = defineProps({ time: { type: [Number], default: 0 } })
</script>

<template>
  <view class="countdown">
    <view class="countdown__body-left">等待付款</view>
    <u-count-down class="countdown__body-right" :timestamp="$props.time" font-size="28" @change="$emit('change', $event)" @end="$emit('end')" />
  </view>
</template>

<style scoped lang="scss">
@include b(countdown) {
  width: 320rpx;
  @include flex(space-between);
  height: 34rpx;
  background: pink;
  border-radius: 20rpx;
  @include e(body-left) {
    width: 146rpx;
    height: 34rpx;
    text-align: center;
    color: #fff;
    background: red;
    border-radius: 20rpx;
    border-top-right-radius: 0rpx;
  }
  @include e(body-right) {
    border-radius: 0 20rpx 20rpx 0;
    flex: 1;
    height: 34rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #e94927;
    background: pink;
  }
}
</style>
